<script setup>
import { RouterView, useRouter, useRoute } from "vue-router";
import { ref, watch, computed } from "vue";
const router = useRouter();
const route = useRoute();
const option = [
  {
    text: "选购商品",
    value: 1,
    url: "/",
    back: { title: "清空", event: () => window.win_goods_back?.() },
    submit: { title: "下一步", event: () => window.win_pick_submit?.() },
  },
  {
    text: "商品管理",
    value: 2,
    url: "/goods",
    submit: { title: "保存", event: () => window.win_goods_submit?.() },
  },
  {
    text: "打印票据",
    value: 3,
    url: "/info",
    back: { title: "继续添加", event: () => window.win_info_back?.() },
    submit: { title: "导出pdf", event: () => window.win_info_submit?.() },
  },
];
const op = ref();
function getOp(path) {
  return option.find((it) => it.url == path);
}

const matcher = location.hash.match(/\/[a-zA-Z0-9]*/);
const hash = matcher[0];
const menu = ref(getOp(hash).value);
watch(
  () => route.path,
  () => {
    const it = getOp(route.path);
    op.value = it;
    menu.value = it.value;
  },
  { immediate: true }
);
watch(
  () => menu.value,
  (v) => {
    const { url } = option.find((it) => it.value == v);
    router.replace(url);
  }
);
</script>

<template>
  <div class="aum">
    <van-dropdown-menu class="atd">
      <van-dropdown-item v-model="menu" :options="option" />
    </van-dropdown-menu>
    <van-button
      type="warning"
      class="lb"
      v-if="op?.back"
      @click="op?.back?.event()"
      >{{ op?.back?.title }}</van-button
    >
    <van-button
      type="success"
      class="rb"
      v-if="op?.submit"
      @click="op?.submit?.event()"
      >{{ op?.submit?.title }}</van-button
    >
    <div class="amd"><RouterView /></div>
  </div>
</template>

<style scoped>
.aum {
  height: 100vh;
  overflow: auto;
}
.atd {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
}
.amd {
  padding: 10px;
  padding-top: 48px;
}
.rb {
  z-index: 999;
  float: right;
  margin-top: 2px;
  margin-right: 4px;
  position: absolute;
  top: 0px;
  right: 0;
}
.lb {
  z-index: 999;
  float: left;
  margin-top: 2px;
  margin-left: 4px;
  position: absolute;
  top: 0px;
  left: 0;
}
</style>
